<!DOCTYPE html>
<html>

<head>
    <title>Vue 实例</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 数据与方法 -->
    <div id="example">
        {{ a }}
        <br>
        {{ b }}
    </div>


    <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>


    <!-- 实例生命周期钩子 -->
    <img src="lifecycle.png" />



    <script>
        // 数据与方法
        // 我们的数据对象
        var data = { a: 1 };

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            el: '#example',
            data: data
        });

        // 获得这个实例上的属性
        // 返回源数据中对应的字段
        console.log(vm.a == data.a); // => true

        // 设置属性也会影响到原始数据
        vm.a = 2
        console.log(data.a); // => 2

        // ……反之亦然
        data.a = 3
        console.log(vm.a); // => 3

        vm.b = 'hi'


        console.log(vm.$data == data); // => true
        console.log(vm.$el == document.getElementById('example')); // => true

        // $watch 是一个实例方法
        vm.$watch('a', function(newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
        });



        var obj = { foo: 'bar' };

        Object.freeze(obj);

        var app = new Vue({
            el: '#app',
            data: obj
        });


        // 实例生命周期钩子
        new vue({
            data: {
                a: 1
            },
            created: function() {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a);
            }
        });
        // => "a is: 1"

    </script>
</body>

</html>